<template>
  <div>
    
    <div style="margin-top: 100px;background-color: white;" class="container">
      <div class="content">


        <el-table
            :data="filterData"
            border
            style="width: 100%"
            max-height="320"
            @select="handleSelectionChange"
            @select-all="handleSelectAll">

          <el-table-column
              fixed
              prop="id"
              label="编号"
              width="120">
          </el-table-column>
          <el-table-column
              prop="name"
              label="名称"
              width="120">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="130">
            <template slot-scope="scope">

              <el-button type="text" size="small" @click="GetIN(scope.row)" >归还</el-button>
              <el-button @click="OutON(scope.row)" type="text" size="small" style="color: red">借出</el-button>
            </template>

          </el-table-column>

        </el-table>
      </div>

    </div>
  </div>


</template>

<script>
import Topbar from "@/components/Topbar.vue";
export default {
  methods: {
    handleSelectAll(value){

      for( this.i=0;this.i<value.length;this.i++)
      {
        let tempAtable = {}; // 使用let关键字创建新的作用域

        tempAtable.id=value[this.i].id;
        tempAtable.name=value[this.i].name;
        this.atable.push( tempAtable);
      }
      console.log(this.atable);

      /**
       for
       {
        console.log(636);
this.checked.push(value[this.checkednum].id);
        this.checkednum++;
      }不理解为什么不运行呢 length拼写错误，legend
       value.forEach(item => {
        // 将选中行添加到checked数组中
        this.Atable.id=item.id;

        this.Atable.name=item.name;
        this.atable.push(this.Atable);

      }这一段代码是不是有问题，我输出发现atable里面全是最后一个数据

       是的，你遇到了常见的 JavaScript 中闭包问题。在循环中使用 this.Atable 时，实际上是在共享同一个对象实例，
       你每次循环都在修改同一个 this.Atable 对象，然后将它添加到 atable 数组中。这导致 atable 中实际上包含的是多个对同一个对象的引用。

       为了解决这个问题，你需要在循环内部创建新的 this.Atable 对象，而不是重复使用同一个对象。
       */

    },



    ion(worker){
      this.Atable.id=worker.id;

      this.Atable.name=worker.name;
    },
    GetIN(worker){
      console.log(worker);
      this.ion(worker);
      this.Atable.states="归还";
      console.log(this.Atable)
      this.$axios.post('http://localhost:8090/devicetable/add',this.Atable ,{
        headers: {
          'Content-Type': 'application/json',
        }
      })
          .then(response => {
            this.worker=response.data;
            console.log(this.worker);
            // 请求返回数据后，调用 filterData 方法进行数据过滤

          })
          .catch(error => {
            console.error(error);
            // 处理出错情况，例如显示错误信息等等
          });
    },
    OutON(worker) {
      this.ion(worker);
      this.Atable.states="借出";

      this.$axios.post('http://localhost:8090/devicetable/add',this.Atable ,{
        headers: {
          'Content-Type': 'application/json',
        }
      })
          .then(response => {
            this.worker=response.data;
            console.log(this.worker);
            // 请求返回数据后，调用 filterData 方法进行数据过滤

          })
          .catch(error => {
            console.error(error);
            // 处理出错情况，例如显示错误信息等等
          });
    },


    search(){
      this.searchText=this.InPut;

    },

  },
  name: "role1Inone",
  components: {Topbar},
  mounted(){

    this.$axios.post('http://localhost:8090/device/get',null ,{
      headers: {
        'Content-Type': 'application/json',
      }
    })
        .then(response => {
          this.worker=response.data;
          console.log(this.worker);console.log(this.worker);
          // 请求返回数据后，调用 filterData 方法进行数据过滤

        })
        .catch(error => {
          console.error(error);
          // 处理出错情况，例如显示错误信息等等
        });

  },
  data() {
    return {
      u:'',
      i:0,
      searchText:'',

      checkednum:0,

      isIndeterminate: true,
      Name: '',
      InPut:'',
      dialogVisible:false,
      newWorker:{
        id: '',
        name:'',
        phone:'',
        company:'',
        sex: '',
        role:'',
        date:'',
      },
      Atable:{
        id: '',
        name:'',
        states:'',

      },
      atable:[],

      worker:[{
        id: '',
        name:'',
        number:'',
      }]

    }
  },
  computed:{
    filterData(){
      const searchText =this.searchText.trim().toLowerCase();//大写转小写
      if(!searchText){
        return this.worker;
      }
      else{
        return this.worker.filter((item) =>{

          return(
              item.date.toLowerCase().includes(searchText)||
              item.id.toLowerCase().includes(searchText)||
              item.name.toLowerCase().includes(searchText)
          );

        })
      }
    },
  },
}

</script>

<style scoped>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
  margin-left: 200px;
  height: 500px;
  width: 40%;
}
.content{
  width: 80%;
  text-align: center;
  align-content: center
}
</style>